<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大学生思政在线</title>
		<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<!-- <div  id="header"></div> -->
		<header>
			<div class="top">
				<div>
					<div class="logo">
						<img src="img/LOGO.png">
					</div>
					<div class="user">
						<a href="#" class="login">登录</a>
						<a href="" class="regist">注册</a>
					</div>
				</div>
			</div>
			<div class="nav">
				<ul>
					<li><a href="#">首页1</a></li>
					<li><a href="#">首页2</a></li>
					<li><a href="#">首页3</a></li>
					<li><a href="#">首页4</a></li>
					<li><a href="#">首页5</a></li>
					<li><a href="#">首页6</a></li>
					<li><a href="#">首页7</a></li>
					<li><a href="#">首页8</a></li>
					<li><a href="#">首页9</a></li>
				</ul>

			</div>
			<div class="banner">
				<img src="img/banner1.jpg" alt="">
			</div>
		</header>
		<div id="container">
			<div class="response">
				<div>
					<div class="title">
						<h3>使命担当</h3>
						<p>Everyone is responsible for the rise and fall of the world</p>
					</div>
					<p class="titlep">天下兴亡，匹夫有责</p>
					<div class="ResCon">
						<div class="resitem">
							<div class="itemimg">
								<img src="img/pic1.png" alt="">
							</div>
							<div class="iteminfo">
								<h4>试看将来的环球 必是赤旗的世界
								</h4>
								<p>中国共产主义运动先驱李大钊</p>
								<span class="fa fa-chevron-down"></span>
								<p><a href="#" class=" fa fa-heart">关注</a></p>
							</div>
						</div>
						<div class="resitem">
							<div class="itemimg">
								<img src="img/pic2.png" alt="">
							</div>
							<div class="iteminfo">
								<h4>试看将来的环球 必是赤旗的世界2
								</h4>
								<p>中国共产主义运动先驱李大钊</p>
								<span class="fa fa-chevron-down"></span>
								<p><a href="#" class=" fa fa-heart">关注</a></p>
							</div>
						</div>
						<div class="resitem">
							<div class="itemimg">
								<img src="img/pic3.png" alt="">
							</div>
							<div class="iteminfo">
								<h4>试看将来的环球 必是赤旗的世界3
								</h4>
								<p>中国共产主义运动先驱李大钊</p>
								<span class="fa fa-chevron-down"></span>
								<p><a href="#" class=" fa fa-heart">关注</a></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="Cultural">
				<div class="Culturalbg">
					<div>
						<div class="title">
							<h3>文化自信</h3>
							<p>Everyone is responsible for the rise and fall of the world</p>
						</div>
						<p class="titlep">天下兴亡，匹夫有责</p>
						<div class="ResCon">
							<div class="resitem">
								<div class="itemimg">
									<img src="img/try1.jpg" alt="">
								</div>
								<div class="iteminfo">
									<h4>试看将来的环球 必是赤旗的世界
									</h4>
									<p>中国共产主义运动先驱李大钊</p>

								</div>
							</div>
							<div class="resitem">
								<div class="itemimg">
									<img src="img/try2.jpg" alt="">
								</div>
								<div class="iteminfo">
									<h4>试看将来的环球 必是赤旗的世界2
									</h4>
									<p>中国共产主义运动先驱李大钊</p>

								</div>
							</div>
							<div class="resitem">
								<div class="itemimg">
									<img src="img/try3.jpg" alt="">
								</div>
								<div class="iteminfo">
									<h4>试看将来的环球 必是赤旗的世界3
									</h4>
									<p>中国共产主义运动先驱李大钊</p>

								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
			<div class="Craftsman">
				<div></div>
			</div>			
			<div class="photos">
				<div  >
					<div class="photoimg"><img src="img/show1.jpg" alt=""></div>
					<div class="photoimg"><img src="img/show2.jpg" alt=""></div>
					<div class="photoimg"><img src="img/show3.jpg" alt=""></div>
					<div class="photoimg"><img src="img/show4.jpg" alt=""></div>
					<div class="photoimg"><img src="img/show5.jpg" alt=""></div>
					<div class="photoimg"><img src="img/show6.jpg" alt=""></div>
					<div class="photoimg"><img src="img/show7.jpg" alt=""></div>
					<div class="photoimg"><img src="img/show8.jpg" alt=""></div>
					<div class="photoimg"><img src="img/show9.jpg" alt=""></div>
					
				</div>
			</div>
			<div class="tabnav">
				<div>
					<div class="tabmenu">
						<div class="navitem">
							<a href="#tab1">党员行动</a>
						</div>
						<div class="navitem">
							<a href="#tab2">不忘初心</a>
						</div>
						<div class="navitem">
							<a href="#tab3">红船精神 </a>
						</div>
					</div>
					<div class="tabcontent">
						<div class="tabitem" id="tab1">
							<div class="item">
								<div class="itmimg"><img src="img/pic1.png" alt=""></div>
								<div class="itminfo">
									<h4>战“疫”一线党旗红</h4>
									<p>乌云终将散去，阳光也终会洒向大地。有着这样温柔的你、这样温柔你们，我们必能在最美的春天遇见最美的自己</p>
									<a href="">查看更多</a>
								</div>
							</div>
							<div>

							</div>
						</div>
						<div class="tabitem" id="tab2">
							222
						</div>
						<div class="tabitem" id="tab3">
							3333
						</div>
					</div>
				</div>
			</div>

		</div>

		<footer>
			<p>版权所有</p>

		</footer>
		<audio src="audio/bg.MP3"></audio>

	</body>
</html>
